<template>
	<view class="lay">
		<!-- 导航栏 -->
		<uni-nav-bar :fixed="true" :border="false"  status-bar left-icon="left" @clickLeft="back" >
			<view class="tab">
				<u-tabs
				:list="list1" 
				@click="click" 
				lineWidth="30" 
				lineColor="#000000"
				 ></u-tabs>
			</view>
		</uni-nav-bar>
		
		<!-- 资料 -->
		<uni-card>
			<u-cell-group :border="false">
				<u-cell
				title="头像"
				:isLink="true"
				size="large"
				center
				>
				<view slot="value">
					<uni-file-picker
					 v-model="value"
					  limit="1" 
					  :del-icon="false" 
					  disable-preview 
					  :imageStyles="imageStyles"
					  :auto-upload="false" 
					  file-mediatype="image"
					  @select="upload"
					  >头像</uni-file-picker>
				</view>
				</u-cell>
				 <u-toast ref="uToast"></u-toast>
				<u-cell
				title="昵称"
				:isLink="true"
				size="large"
				:value="user.userName"
				center
				@click="show = true"
				></u-cell>
				<!-- 修改昵称遮罩层 -->
				<u-popup  :round="10" mode="center" :show="show" @close="show = false" @open="show = true">
				    <view class="name-pop">
				        <text>修改昵称</text>
						 <u--input
							v-model="user.userName"
						    placeholder="修改昵称"
						    border="bottom"
						  ></u--input>
				    </view>
				</u-popup>
				
				<u-cell
				title="性别"
				:isLink="true"
				size="large"
				:value="setSex(user)"
				center
				@click="show = true"
				>
				</u-cell>
				
				<u-cell
				title="生日"
				:isLink="true"
				size="large"
				:value="brithday"
				center
				@click="openCalendar">
				</u-cell>
				<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
						 :endDate="info.endDate" :range="info.range" @confirm="confirm" @close="showCalendar = false"/>
				<u-cell
				title="地区"
				:isLink="true"
				size="large"
				:value="user.cityId === null? '未设置':user.provinceName+'-'+user.cityName"
				center
				@click="selectPlace"
				>
				</u-cell>

				<u-cell
				title="手机号码"
				:isLink="true"
				size="large"
				:value="user.phone"
				center
				></u-cell>
			</u-cell-group>
		</uni-card>
		
		<uni-card>
			<u-cell-group :border="false">
				<u-cell
				title="学号"
				:isLink="true"
				size="large"
				:value="studentId"
				center
				></u-cell>
				
			</u-cell-group>
		</uni-card>
			
		<uni-card>
			<u-cell-group :border="false">
				<u-cell
				title="对外展示身份(主企业)"
				:isLink="true"
				size="large"
				:value="school"
				center
				url=""
				></u-cell>
				
				<u-cell
				title="工作经历"
				:isLink="true"
				size="large"
				center
				>
				</u-cell>
				<u-cell
				title="教育经历"
				:isLink="true"
				size="large"
				center
				>
				</u-cell>
			</u-cell-group>
		</uni-card>
		
		<u-popup :show="showProvince" mode="bottom" @close="showProvince = false" @open="showProvince = true">
			<view style="width: 100%; height: 700rpx;">
				<uni-section title="省份" type="line">
				    <uni-data-select
					:clear="false"
					v-model="value2"
				    :localdata="provinceList"
				    @change="change"
				    ></uni-data-select>
				</uni-section>
				<uni-section title="城市" type="line">
					<uni-data-select
					:clear="false"
					v-model="value3"
					:localdata="cityList"
					@change="getCity"
					></uni-data-select>
				</uni-section>
			</view>
		</u-popup>	
		
		<button class="save" @click="save()">保存</button>
		
	</view>
</template>

<script>
import upload from '../../uni_modules/uview-ui/libs/config/props/upload';
	export default {
		data() {
			return {
				value2:0,
				value3:0,
				range:[
					{pId:0,pName:'篮球'},
					{pId:1,pName:'足球'},
					{pId:2,pName:'游泳'},
					{pId:3,pName:'羽毛球'},
					{pId:4,pName:'乒乓球'},
					{pId:5,pName:'排球'},
					{pId:6,pName:'橄榄球'},
				],
				toast:{
					type:'success',
					title:'成功主题',
					message:'保存成功',
					url:'/pages/user/index'
				},
				imageStyles: {
					width: 50,
					height: 50,
					border: {
						radius: '50%'
					}
				},
				list1:[ {name: '个人资料'},{name:'企业/团队'}],
				brithday: '2001-08-10',
				province:'广西',
				city:'玉林',
				show:false,
				show1:false,
				showProvince:false,
				user:{},
				value1: Number(new Date()),
				school:'',
				studentId:null,
				value:{
					name:'avatar',
					extname:'png',
					url:'',
				},
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				// 省份列表
				provinceList:[],
				provinceCityVoList:[],
				cityList:[],
			}
		},
		onLoad(){
			this.user = uni.getStorageSync('user')
			this.value.url = this.user.avaUrl
			uni.request({
				url:'http://localhost:8090/nailCampus/school/getSchool',
				method:'GET',
				header:{
					"token":uni.getStorageSync('token')
				},
				success:res=>{
					if(res.data.data!=null){
						this.school = res.data.data.schoolName
						this.studentId = res.data.data.studentId
					}else{
						this.school = ''
					}
				}
			})
		},
		methods: {
			selectPlace(){
				this.showProvince = true
				uni.request({
					url:'http://localhost:8090/nailCampus/province/getAllProvince',
					method:'GET',
					success:res=>{
						this.provinceCityVoList = res.data.data
						// console.log(this.provinceCityVoList)
						this.provinceDataConversion()
					}
				})
			},
			provinceDataConversion(){
				for (var i = 0; i < this.provinceCityVoList.length; i++) {
					let provinceCity = {value:0,text:null}
					provinceCity.value = this.provinceCityVoList[i].pid
					provinceCity.text = this.provinceCityVoList[i].pname
					this.provinceList.push(provinceCity)
				}
			},
			change(e){
				this.cityList = []
				for(let i=0;i<this.provinceCityVoList[e-1].cityList.length;i++){
					let city = {value:0,text:''}
					city.value = this.provinceCityVoList[e-1].cityList[i].id
					city.text = this.provinceCityVoList[e-1].cityList[i].name
					this.cityList.push(city)
				}
				this.user.provinceName = this.provinceCityVoList[e-1].pname
				this.user.cityName = this.provinceCityVoList[e-1].cityList[0].name
				this.user.cityId = this.provinceCityVoList[e-1].cityList[0].id
			},
			getCity(e){
				console.log(e)
				console.log(this.cityList)
				for(let i = 0;i<this.cityList.length;i++){
					if(this.cityList[i].value == e){
						this.user.cityId = e
						this.user.cityName = this.cityList[i].text
						console.log(this.user)
					}
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					// 头像上传成功后
					complete() {
						params.url && uni.reLaunch({
							url: params.url
						})
					}
				})
			},
			back() {
				uni.switchTab({
					url:'/pages/user/index',
				})
			},
			click(item){
				console.log(item)
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			confirm(e) {
				this.brithday = e.fulldate;
				this.show1 = false;
			},
			setSex(user){
				if(user.sex===1){
					return '男';
				}else{
					return  '女';
				}
			},
			openCalendar(){
				this.$refs.calendar.open()
			},
			// 上传头像到阿里云
			upload(e) {
				let _this = this
				const tempFilePaths = e.tempFilePaths;//e是获取的图片源
				uni.uploadFile({  
					url: 'http://localhost:8090/nailCampus/fileUpload', //上传图片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: res => {
						_this.user.avaUrl = JSON.parse(res.data).data
					}
				})
			},
			// 保存修改的个人数据
			save(){
				console.log(this.user)
				uni.request({
					url:"http://localhost:8090/nailCampus/user/updateUser",
					method:"POST",
					data:this.user,
					success:res=> {
						uni.setStorageSync('user',this.user)
						this.showToast(this.toast);
					}
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.lay{
		height: 100%;
		.tab{
			width: 80%;
			margin-left: 15%;
		}
		.name-pop{
			padding-top: 5%;
			width: 100%;
			height: 150rpx;  
			text{
				margin-top: 5%;
				margin-left: 10%;
				color:#959595;
				font-size: 20rpx;
			}
		}
		.save{
			margin-left: 3%;
			margin-right: 3%;
			background-color: #0080FF;
			color: white;
		}
		.save:active{
			background-color: #0058ab;
		}
	}

</style>
